<script id="effectsTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">水平展开特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="horizontalExpandEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">垂直展开特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="verticalExpandEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">淡入特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="fadeInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">淡出特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="fadeOutEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">水平翻转特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="horizontalFlipEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">垂直翻转特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="verticalFlipEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">水平翻页特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="horizontalPageTurnEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">垂直翻页特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="verticalPageTurnEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">滑入上特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="upSlideInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">滑入下特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="downSlideInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">滑入左特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="leftSlideInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">滑入右特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="rightSlideInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">瓦片上特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="upTileEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">瓦片下特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="downTileEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">瓦片左特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="leftTileEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">瓦片右特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="rightTileEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">替换特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="replaceEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">变形特效<i class="fas fa-shopping-cart" id="shoppingCart"></i></h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="transferEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">放大特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="zoomInEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-3">
            <div class="card mb-3">
                <h5 class="card-header">缩小特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="zoomOutEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card mb-3">
                <h5 class="card-header">自定义翻页特效</h5>
                <div class="card-body position-relative p-0">
                    <div class="border-0" id="customPageTurnEffects"></div>
                    <i class="k-icon k-i-arrowhead-w" id="previous"></i>
                    <i class="k-icon k-i-arrowhead-e" id="next"></i>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card mb-3">
                <h5 class="card-header">自定义替换特效</h5>
                <div class="card-body p-0">
                    <div class="row no-gutters">
                        <div class="col-md-8">
                            <div class="border-0" id="customReplaceEffects"></div>
                        </div>
                        <div class="col-md-4">
                            <div class="border-0" id="customReplaceList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card mb-3">
                <h5 class="card-header">自定义综合特效</h5>
                <div class="card-body p-0 pt-3">
                    <div class="row d-flex border-0" id="customCombinedEffects"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card mb-3">
                <h5 class="card-header">语义变焦特效</h5>
                <div class="card-body position-relative p-0 pt-3">
                    <div class="row d-flex border-0" id="semanticZoomEffects"></div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        .listItem {
            overflow: hidden;
        }
        .listItem img {
            width: 100%;
        }
        .listItem .intro {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 15px;
            width: calc(100% - 30px);
            height: 100%;
            color: #fff;
            background: rgba(0, 0, 0, .6);
            white-space: nowrap;
            overflow: hidden;
        }
        #horizontalExpandEffects .intro {
            right: 15px;
            width: 0;
        }
        #verticalExpandEffects .intro {
            bottom: 0;
            height: 0;
        }
        #fadeInEffects .intro {
            opacity: 0;
        }
        #fadeOutEffects .intro {
            opacity: 1;
        }
        #horizontalFlipEffects .intro,
        #verticalFlipEffects .intro,
        #horizontalPageTurnEffects .intro,
        #verticalPageTurnEffects .intro,
        #customCombinedEffects .intro,
        #semanticZoomEffects .intro {
            display: flex !important;
            z-index: -1;
        }
        #horizontalPageTurnEffects img,
        #verticalPageTurnEffects img,
        #replaceEffects img,
        #semanticZoomEffects img {
            position: absolute;
        }
        #upSlideInEffects .intro,
        #upTileEffects .intro {
            transform: translateY(100%);
        }
        #downSlideInEffects .intro,
        #downTileEffects .intro {
            transform: translateY(-100%);
        }
        #leftSlideInEffects .intro,
        #leftTileEffects .intro {
            transform: translateX(calc(100% + 15px));
        }
        #rightSlideInEffects .intro,
        #rightTileEffects .intro {
            transform: translateX(calc(-100% - 15px));
        }
        .k-fx-swap.k-fx-start .k-fx-next {
            transform: translatex(100%);
        }
        .k-fx-swap.k-fx-end .k-fx-current {
            opacity: 0;
            transform: scale(0.9);
        }
        #transferEffects .intro {
            z-index: -1;
        }
        #shoppingCart {
            float: right;
            margin-top: .25rem;
            width: 20px;
            height: 20px;
        }
        #zoomInEffects .intro {
            transform: scale(0);
        }
        #zoomOutEffects .intro {
            transform: scale(1);
        }
        #customPageTurnEffects,
        #customReplaceEffects,
        #customReplaceList {
            height: 300px;
            overflow: hidden;
        }
        #customPageTurnEffects .pageItem,
        #customReplaceEffects .pageItem {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            border: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #customPageTurnEffects .temp-page,
        #customReplaceEffects .current {
            display: flex !important;
        }
        #customPageTurnEffects .intro,
        #customReplaceEffects .intro {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 8px;
            width: 100%;
            height: 40px;
            color: #fff;
            background: #000;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
        }
        #customPageTurnEffects picture,
        #customReplaceEffects picture,
        #semanticZoomEffects picture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            filter: blur(50px);
            opacity: .8;
        }
        #previous,
        #next {
            position: absolute;
            top: 50%;
            z-index: 1;
            margin-top: -32px;
            font-size: 4.5em;
            font-weight: 400;
            color: #fff;
            text-shadow: 0 0 15px rgba(0, 0, 0, .3);
            opacity: .7;
            cursor: pointer;
        }
        #previous {
            left: 0;
        }
        #next {
            right: 0;
        }
        #customReplaceList div:hover {
            background: #ededed;
            cursor: pointer;
        }
        #semanticZoomEffects,
        #semanticZoomEffects .k-listview-content {
            position: static;
        }
        #semanticZoomEffects .listItem {
            position: static;
            overflow: visible;
            cursor: pointer;
        }
        #semanticZoomEffects .intro {
            top: auto;
            left: auto;
            opacity: 0;
        }
        #semanticZoomEffects picture {
            opacity: 0;
            z-index: -1;
        }
    </style>
</script>